<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script type="text/javascript" src="js/vue.js"></script>
		<link href="css/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
		<link href="css/reset.css" rel="stylesheet" />
		<link href="css/businessList.css" rel="stylesheet">
		<title>饿了么 商家列表</title>
	</head>
	<body>
		<div class="wrapper" id="app">
			
			<!-- header部分 -->
			<header>
				<p>商家列表</p>
			</header>
			
			<!-- 商家列表部分 -->
			<ul class="business">
				<li onclick="location.href='businessInfo.html'">
					<div class="business-img">
						<img src="img/sj01.png">
						<div class="business-img-quantity">3</div>
					</div>
					<div class="business-info">
						<h3>万家饺子（软件园E18店）</h3>
						<p>&#165;15起送 | &#165;3配送</p>
						<p>各种饺子炒菜</p>
					</div>
				</li>
				<li onclick="location.href='businessInfo.html'">
					<div class="business-img">
						<img src="img/sj02.png">
						<div class="business-img-quantity">2</div>
					</div>
					<div class="business-info">
						<h3>小锅饭豆腐馆（全运店）</h3>
						<p>&#165;15起送 | &#165;3配送</p>
						<p>特色美食</p>
					</div>
				</li>
				<li onclick="location.href='businessInfo.html'">
					<div class="business-img">
						<img src="img/sj03.png">
						<div class="business-img-quantity">1</div>
					</div>
					<div class="business-info">
						<h3>麦当劳麦乐送（全运路店）</h3>
						<p>&#165;15起送 | &#165;3配送</p>
						<p>汉堡薯条</p>
					</div>
				</li>
				<li onclick="location.href='businessInfo.html'">
					<div class="business-img">
						<img src="img/sj04.png">
					</div>
					<div class="business-info">
						<h3>米村拌饭（浑南店）</h3>
						<p>&#165;15起送 | &#165;3配送</p>
						<p>各种炒菜拌饭</p>
					</div>
				</li>
				<li onclick="location.href='businessInfo.html'">
					<div class="business-img">
						<img src="img/sj05.png">
					</div>
					<div class="business-info">
						<h3>申记串道（中海康城店）</h3>
						<p>&#165;15起送 | &#165;3配送</p>
						<p>烤串炸串</p>
					</div>
				</li>
				<li onclick="location.href='businessInfo.html'">
					<div class="business-img">
						<img src="img/sj06.png">
					</div>
					<div class="business-info">
						<h3>半亩良田排骨米饭</h3>
						<p>&#165;15起送 | &#165;3配送</p>
						<p>排骨米饭套餐</p>
					</div>
				</li>
				<li onclick="location.href='businessInfo.html'">
					<div class="business-img">
						<img src="img/sj07.png">
					</div>
					<div class="business-info">
						<h3>茶兮鲜果饮品（国际软件园店）</h3>
						<p>&#165;15起送 | &#165;3配送</p>
						<p>甜品饮品</p>
					</div>
				</li>
				<li onclick="location.href='businessInfo.html'">
					<div class="business-img">
						<img src="img/sj08.png">
					</div>
					<div class="business-info">
						<h3>唯一水果捞（软件园E18店）</h3>
						<p>&#165;15起送 | &#165;3配送</p>
						<p>新鲜水果</p>
					</div>
				</li>
				<li onclick="location.href='businessInfo.html'">
					<div class="business-img">
						<img src="img/sj09.png">
					</div>
					<div class="business-info">
						<h3>满园春饼（全运路店）</h3>
						<p>&#165;15起送 | &#165;3配送</p>
						<p>各种春饼</p>
					</div>
				</li>
			</ul>
			
			<!-- 底部菜单部分 -->
			<ul class="footer">
				<li onclick="location.href='index.html'">
					<i class="fa fa-home"></i>
					<p>首页</p>
				</li>
				<li>
					<i class="fa fa-compass"></i>
					<p>发现</p>
				</li>
				<li onclick="location.href='orderList.html'">
					<i class="fa fa-file-text-o"></i>
					<p>订单</p>
				</li>
				<li>
					<i class="fa fa-user-o"></i>
					<p>我的</p>
				</li>
			</ul>
			
		</div>
	</body>
</html>
<script>
	var v = new Vue({

		el: '#app',
		/*把table的id选进来，对象的名字叫app*/
		data: {
			info: 1
		},
		mounted() { //钩子方法，ajax的fun方法转移过来
		var str=window.location.search;
		console.log(str);
		str='http://localhost:8458/Elm_DongRuanProJect_WebProject/BusinessListController'+str;
			axios.get(str) //异步请求
				.then(function(response) {
					v.info = response.data; //后端返回的json串儿，赋值到vue,改变前端
				})
				.catch(function(error) {
					console.log(error);
				});
		},
	});
</script>
